<template>
    <div class="button-group">
        <el-button type="primary" @click="addUser()">新增用户</el-button>
        <el-button type="danger" @click="delUsers()">批量删除</el-button>
    </div>

    <el-table :data="userPageInfo.list" style="width: 100%" @selectionChange="selectId">
        <el-table-column type="selection" width="50px"/>
        <el-table-column type="index" label="序号" width="55px"/>
        <!--property：字段名称，对应列内容的字段名，也可以使用prop属性-->
        <el-table-column property="loginAct" label="账号"/>
        <el-table-column property="name" label="姓名"/>
        <el-table-column property="phone" label="手机"/>
        <el-table-column property="email" label="邮箱"/>
        <!--show-overflow-tooltip：当内容过长被隐藏时显示tooltip（提示）-->
        <el-table-column property="createTime" label="创建时间" show-overflow-tooltip/>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" :icon="Message" circle @click="view(scope.row.id)"/>
                <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)"/>
                <el-button type="danger" :icon="Delete" circle @click="deleteUser(scope.row.id)"/>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        background layout="prev, pager, next, jumper, total"
        :total="userPageInfo.total"
        :page-size="userPageInfo.pageSize"
        @change="toPage"/>
</template>

<script setup>
import {Delete, Edit, Message} from '@element-plus/icons-vue'
import {inject, onMounted, ref} from 'vue'
import {confirmMessage, showMessage} from '../util/message'
import {doDelete, doGet} from '../http/httpRequest'
import {router} from "@/router/router.js";
import {useRoute} from "vue-router";

// 创建响应式变量存储用户分页数据
// 初始值为空数组，用于存储从后端获取的用户列表及分页信息
const userPageInfo = ref([]);
// 获取当前路由信息
let route = useRoute();
//用户选择状态存储数组，用于批量删除
let selectUsers = [];
/**
 * 从父组件注入的刷新路由视图函数
 * 来源于DashboardView.vue中通过provide提供的flush方法
 * 用于在用户操作后刷新当前视图数据
 */
let flush = inject('flush');

// 组件挂载完成后执行的钩子函数
// 页面加载完成后自动触发，初始化用户列表数据
onMounted(() => {
    // 调用用户列表加载函数，默认加载第一页数据
    loadUserList(1);
})

// 加载用户列表数据的核心函数
// 参数: current - 当前页码
const loadUserList = current => {
    // 调用GET类型的用户列表API
    // 参数1: 后端用户列表接口的相对路径
    // 参数2: 请求参数对象，包含当前页码信息
    doGet('api/users', {current: current}).then(resp => {
        // 检查后端返回的状态码
        // 200表示接口调用成功并返回有效数据
        if (resp.data.code == 200) {
            // 将后端返回的用户数据更新到响应式变量
            // 触发页面重新渲染，展示最新用户列表
            userPageInfo.value = resp.data.info;
        } else {
            // 接口调用失败时显示错误提示
            // 告知用户数据加载失败
            showMessage('数据加载失败', 'error');
        }
    })
}

// 分页导航函数
// 供分页组件调用，用于切换到指定页码
// 参数: current - 目标页码
const toPage = current => {
    // 调用用户列表加载函数，加载指定页码数据
    loadUserList(current);
}

//查看明细
const view = id => {
    //跳转到明细页面
    router.push('/dashboard/user/' + id);
}

const edit = id => {
    //跳转到修改页面
    router.push('/dashboard/user/edit/' + id);
}

/**
 * 用户删除功能
 * @param {any} id - 要删除的用户ID
 * 功能流程：
 * 1. 调用confirmMessage显示确认对话框
 * 2. 用户确认后调用DELETE API执行删除
 * 3. 根据API响应结果显示成功/失败消息
 * 4. 删除成功后刷新页面以更新用户列表
 */
const deleteUser = id => {
    // 显示删除确认对话框，用户点击确认后执行then回调
    confirmMessage('确定删除?').then(() => {
        // 调用DELETE API删除指定ID的用户
        doDelete('/api/user/' + id, {}).then(resp => {
            if (resp.data.code == 200) {
                showMessage('删除成功', 'success'); // 删除成功提示
                flush(); // 刷新页面以更新用户列表
            } else {
                showMessage(resp.data.msg, 'error'); // 删除失败提示
            }
        })
    }).catch(() => {
        // 用户取消删除时的回调（当前为空实现）
    })
}

/**
 * 跳转到新增用户页面
 * 使用路由导航跳转到用户新增页面
 */
const addUser = () => {
    router.push('/dashboard/user/add'); // 导航到新增用户路由
}

/**
 * 处理用户选择逻辑，提取选中项ID到全局数组
 * @param {Array} item - 选中的用户对象数组，每个对象需包含id属性
 * @description 将清空现有选择并重新收集选中项ID，用于批量操作前的数据准备
 */
const selectId = item => {
    // 清空现有选择数组
    selectUsers = [];
    // 遍历选中项集合，提取ID属性
    for (let index in item) {
        selectUsers.push(item[index].id);
    }
}

/**
 * 批量删除选中用户的核心处理函数
 * @description 实现完整的删除流程：选择校验→二次确认→接口调用→结果处理
 */
const delUsers = () => {
    // 前置校验：检查是否选择用户
    if (selectUsers.length == 0) {
        showMessage('请选择要删除的用户', 'warning');
        return;
    } else {
        // 二次确认：防止误操作
        confirmMessage('确定删除选中用户?', 'warning').then(() => {
            // 数据格式化：将ID数组转换为逗号分隔字符串
            let ids = selectUsers.join(',');
            // 接口调用：使用封装的DELETE请求方法
            doDelete('api/users', {ids: ids}).then(resp => {
                // 结果处理：根据状态码执行不同逻辑
                if (resp.data.code == 200) {
                    showMessage('删除成功', 'success');
                    // 刷新页面以更新数据列表
                    flush();
                } else {
                    // 错误处理：显示后端返回的具体错误信息
                    showMessage(resp.data.msg, 'error');
                }
            })
        })
    }
}
</script>

<style scoped>
.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-table {
    margin-top: 20px;
}

.button-group {
    display: flex;
    justify-content: flex-end;
}
</style>